<template>
  <div class="sendDetail">
    <div>
      <div class="title">
        <h1 style="color: #4D7181;font-size: 40px">学生信息</h1>
        <div>
          <CopyOutlined class="icon"/>
          <UserOutlined class="icon"/>
        </div>
      </div>
    </div>
    <div style="border: 2px solid #4D7181; padding: 20px;border-top: 30px solid #4D7181; border-radius: 10px">
      <div style="display: flex">
        <div>
          <a-descriptions :column="2" title="基本信息">
            <a-descriptions-item label="姓名">{{ formState.student_name }}</a-descriptions-item>
            <a-descriptions-item label="年龄">{{ formState.student_age }}</a-descriptions-item>
            <a-descriptions-item label="性别">{{ formState.student_sex }}</a-descriptions-item>
            <a-descriptions-item label="地址">{{ formState.student_address }}</a-descriptions-item>
            <a-descriptions-item label="联系方式">{{ formState.student_contact }}</a-descriptions-item>
            <a-descriptions-item label="电子邮箱">{{ formState.student_email }}</a-descriptions-item>
          </a-descriptions>
        </div>
        <div>
          <a-image
              :height="170"
              :src="'http://localhost:8080/file/download?name='+formState.student_img_url"
              :width="120"
          />
        </div>
      </div>
      <a-descriptions title="教育背景">
        <a-descriptions-item label="最高学历">{{ formState.student_highest_education }}</a-descriptions-item>
        <a-descriptions-item label="毕业院校">{{ formState.student_graduation }}</a-descriptions-item>
        <a-descriptions-item label="专业">{{ formState.student_major }}</a-descriptions-item>
        <a-descriptions-item label="毕业时间">{{ formattedFoundationDate }}</a-descriptions-item>
        <a-descriptions-item label="成绩-GPA">{{ formState.student_gpa }}</a-descriptions-item>
        <br>
        <a-descriptions-item label="校园经历">
          <span v-html="truncateText(formState.student_campus_experience)"></span>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="荣誉奖项">
        <a-descriptions-item :span="3" label="荣誉奖项：">
          <span v-html="truncateText(formState.student_honour)"></span>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="技能特长">
        <a-descriptions-item :span="3" label="专业技能：">
          <span v-html="truncateText(formState.student_skills)"></span>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="实习经历">
        <a-descriptions-item label="实习公司">{{ formState.student_internship_company }}</a-descriptions-item>
        <a-descriptions-item label="实习时间">{{ formState.student_year_work }}</a-descriptions-item>
        <br>
        <a-descriptions-item label="主要职责">
          <span v-html="truncateText(formState.student_key_responsibilities)"></span>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="项目经验">
        <a-descriptions-item :span="3" label="参与项目">
          <span v-html="truncateText(formState.student_projects)"></span>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="自我评价">
        <a-descriptions-item :span="3" label="个人简介">
          <span v-html="truncateText(formState.student_personal)"></span>
        </a-descriptions-item>
      </a-descriptions>
      <div style="display:flex;justify-content:center;  width: 100%">
        <a-popconfirm cancel-text="取消" ok-text="确定" title="你确定发面试通知吗？" @confirm="showModal">
          <a-button style="width:200px" type="primary">通过-发面试邀约</a-button>
        </a-popconfirm>
          <a-button danger style="margin-left: 60px; width:200px" type="primary" @click="goBack">返回</a-button>
      </div>
    </div>
  </div>
  <!--  对话框-->
  <div>
    <a-modal v-model:open="open" title="面试通知" ok-text="确认" cancel-text="取消" @ok="handleOk">
      <a-form
          ref="formRef"
          :model="formState1"
          :rules="rules"
      >
        <a-form-item ref="interviewUrl" label="面试连接" name="interviewUrl">
          <a-input v-model:value="formState1.interviewUrl" style="width: 300px"/>
        </a-form-item>
        <a-form-item label="选择时间" required name="interviewData">
          <a-date-picker
              v-model:value="formState1.interviewData"
              show-time
              type="date"
              placeholder="Pick a date"
              style="width: 300px"
          />
        </a-form-item>
        <a-form-item label="面试备注" name="interviewDesc">
          <a-textarea v-model:value="formState1.interviewDesc" style="width: 300px" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import {computed, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {queryStudentByIdAPI} from "@/apis/student.js";
import {message} from "ant-design-vue";
import {CopyOutlined, UserOutlined} from "@ant-design/icons-vue";
import {addInterviewAPI} from "@/apis/interview.js";
import {updateSendStatusAPI} from "@/apis/send.js";
// 新增方法用于将回车替换微br空格替换微&nbsp
const truncateText = (text) => {
  return text.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
};
const route = useRoute()
//定义数据
const formState = reactive({
  student_id: '',
  student_name: '',
  student_img_url: '',
  student_sex: '',
  student_age: '',
  student_contact: '',
  student_email: '',
  student_address: '',
  student_highest_education: '',
  student_campus_experience: '',
  student_graduation: '',
  student_major: '',
  student_graduation_year: '',
  student_gpa: '',
  student_honour: '',
  student_skills: '',
  student_year_work: '',
  student_internship_company: '',
  student_key_responsibilities: '',
  student_projects: '',
  student_personal: '',
});
//获取数据
const useStore = useUserStore();
const enterpriseUserId = ref(useStore.userInfo.userId);
const getData = async (studentId,enterpriseUserId) => {
  const res1 = await queryInformationByUserIdAPI(enterpriseUserId.value)
  formState1.interviewEnterpriseId = res1.data.data.enterpriseId;
  const res = await queryStudentByIdAPI(studentId.value)
  formState.student_id = res.data.data.studentId;
  formState.student_name = res.data.data.studentName;
  formState.student_img_url = res.data.data.studentImgurl;
  formState.student_sex = res.data.data.studentSex;
  formState.student_age = res.data.data.studentAge;
  formState.student_contact = res.data.data.studentContact;
  formState.student_email = res.data.data.studentEmail;
  formState.student_highest_education = res.data.data.studentHighestEducation;
  formState.student_graduation = res.data.data.studentGraduation;
  formState.student_major = res.data.data.studentMajor;
  formState.student_graduation_year = res.data.data.studentGraduationYear;
  formState.student_gpa = res.data.data.studentGpa;
  formState.student_honour = res.data.data.studentHonour;
  formState.student_skills = res.data.data.studentSkills;
  formState.student_year_work = res.data.data.studentYearWork;
  formState.student_internship_company = res.data.data.studentInternshipCompany;
  formState.student_key_responsibilities = res.data.data.studentKeyResponsibilities;
  formState.student_projects = res.data.data.studentProjects;
  formState.student_personal = res.data.data.studentPersonal;
  formState.student_address = res.data.data.studentAddress;
  formState.student_campus_experience = res.data.data.studentCampusExperience;


}
//时间格式处理
const formattedFoundationDate = computed(() => {
  const date = new Date(formState.student_graduation_year);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
  const day = String(date.getDate()).padStart(2, '0');
  // const hours = String(date.getHours()).padStart(2, '0');
  // const minutes = String(date.getMinutes()).padStart(2, '0');
  // const seconds = String(date.getSeconds()).padStart(2, '0');
  // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return `${year}-${month}-${day}`;
});
//接收路由参数
import { useRouter } from 'vue-router';
import {queryInformationByUserIdAPI} from "@/apis/enterprise.js";
import {useUserStore} from "@/stores/user.js";
const router = useRouter();
const studentId = ref();
//返回
const goBack = () => {
  router.go(-1); // -1 表示返回上一个页面
}

// 生命周期
onMounted(() => {
  studentId.value = route.params.intentionStudentId;
  formState1.interviewStudentId = studentId.value;
  getData(studentId,enterpriseUserId)
});

const success = (msg) => {
  message.success(msg);
};
//对话框-通过发出面试通知
const open = ref(false);
const showModal = () => {
  open.value = true;
};
const handleOk = async () => {
  const res=await addInterviewAPI(formState1)
  if (res.data.flag) {
    success(res.data.message);
  }
  open.value = false;
};
const formState1 = reactive({
  interviewUrl: '',
  interviewJobId:'',
  interviewStudentId: '',
  interviewEnterpriseId: '',
  interviewData: undefined,
  interviewDesc: '',
});
const rules = {
  interviewUrl: [
    {
      required: true,
      message: '请输入面试连接',
      trigger: 'change',
    },
  ],
  interviewData: [
    {
      required: true,
      message: '请选择面试时间',
      trigger: 'change',
      type: 'object',
    },
  ],
  interviewDesc: [
    {
      required: true,
      message: 'Please input activity form',
      trigger: 'blur',
    },
  ],
};

</script>
<style scoped>
.sendDetail {
  margin: 5px;
  padding: 20px 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }

}


</style>